<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello Vue</title>
		<script src="vue/vue.js" type="text/javascript"></script>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<h3>姓名（单值）、年龄（单值）、爱好（数组）、女朋友（对象）、豪车（对象数组）</h3>
		<div id="app" v-cloak>
			{{name}}
			<hr >
			{{age}}
			<hr >
			{{hobby[0]}}、{{hobby[hobby.length-1]}}
			{{GF}}
			<hr >
			{{GF.name}}、{{GF.age}}
			<hr >
			{{cars[0].name}},{{cars[0].colour}}
			<br>
			{{cars[1].name}},{{cars[1].colour}}
			<br>
			{{cars[2].name}},{{cars[2].colour}}
			<br>
			{{cars}}
		</div>
	</body>
	
	<script type="text/javascript">
		var info=new Vue({
			el:"#app",
			data:{
				msg:"Hello VueJS!",
				name:"马大力",
				age:25,
				hobby:["唱歌","跳舞","下象棋"],//字符串数组
				GF:{
					name:"马冬梅",
					age:22
				},
				cars:[{
					name:"劳斯莱斯",
					colour:"黑色"
				},{
					name:"保时捷",
					colour:"蓝色"
				},{
					name:"BMW",
					colour:"白色"
				}]
			}
		});
	</script>
	
</html>
